/**
 * @description: 首页
 */
import { InputNumber, Flex } from 'antd';
import { ContainerOutlined, RightCircleOutlined, LeftCircleOutlined } from '@ant-design/icons';
import { useState } from 'react';
import LotteryDraw from './components/LotteryDraw';
import winerbgImg from '@/assets/image/winerbg2.png';
import btnImg from '@/assets/image/startbtn3.png';
import './index.scss';

const FlexPanel = ({ showModal }: { showModal: () => void }) => {
  return (
    <Flex gap="middle" align="center" justify="center" className="pt-[40px] text-stone-300 text-[20px] flex-panel">
      一次性抽取
      <InputNumber addonBefore="+" addonAfter="-" defaultValue={1} width={'100px'} readOnly />
      <div onClick={showModal} className="ml-[200px]">
        已中奖名单 <ContainerOutlined />
      </div>
    </Flex>
  );
};

const Index = () => {
  const [open, setOpen] = useState(false);
  const [showList, setShowList] = useState(false);

  return (
    <>
      <LotteryDraw></LotteryDraw>
      <div className="index-main">
        <section className="title-img-wrapper">
          <img src={winerbgImg} />
        </section>
        <section className="prize-list flex justify-center items-center">
          <LeftCircleOutlined className="text-[35px] text-gray-300" />
          <label className="item-name mx-[30px]">一等奖</label>{' '}
          <RightCircleOutlined className="text-[35px] text-gray-300" />
        </section>
        <section className="prize-wrapper">
          <div className="img-back"></div>
          <img
            src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2351958700,45015370&fm=199&app=68&f=JPEG?w=750&h=750&s=5581F9169CF533BF6E89D5920300F0A1&quot"
            className="max-w-full"
          />
        </section>
        <section className="btn-wrapper">
          <img src={btnImg} />
        </section>
        <FlexPanel />
      </div>

      <div className="back-panel">
        <video loop muted autoPlay playsInline>
          <source src={'https://s.17iu8.com/res/video/61.mp4'} type="video/mp4"></source>
        </video>
      </div>
    </>
  );
};
export default Index;
